import React, { useState } from 'react'
import { Col, Row } from 'antd'
import { CloseOutlined } from '@ant-design/icons';

type Props = {
  title: string,
  show?: boolean,
  setShow: React.Dispatch<React.SetStateAction<boolean>>,
  children: React.ReactNode
}

export default (props: Props) => {
  const { title, children, show, setShow } = props
  const [modelwidth] = useState(160)
  const [modelheight] = useState(200)
  const [modeltop, setTop] = useState(10)
  const [modelleft, setLeft] = useState(48)

  function drag(e: React.DragEvent<HTMLDivElement>) {
    e.stopPropagation()
    e.preventDefault()
    setLeft(e.clientX)
    setTop(e.clientY)
  }

  return <div className="mymodel" draggable="true" onDragEnd={drag} style={{ width: modelwidth, height: modelheight, top: modeltop, left: modelleft, display: show ? 'block' : 'none' }} >
    <Row className="title text-white"   >
      <Col span={16} >
        {title}
      </Col>
      <Col span={8} className="text-right" >
        <CloseOutlined onClick={() => setShow(false)} />
      </Col>
    </Row>
    {children}
  </div>
}